<template>
    <div id="eventScreening">
        <div class="group-event-screening">
            <div class="relationshipBtn" v-if="filterResultList.length > 1">
                <v-button :width="30" @on-click="toggle"
                          :btnText="relationshipBtn.code_value_nm_cns"></v-button>
            </div>
            <div class="group-event-container">
                <div v-for="(item, index) in filterResultList" :key="item.id">
                    <div v-if="index !== 0" style="height: 50px;"></div>
                    <div class="group-event-screening-item" v-for="(val, ind) in item.cond_groups" :key="val.id">
                        <div class="addAndMove">
                            <el-button type="primary" plain @click="add2('1', item, ind)">做过 / 没做过</el-button>
                            <el-button type="primary" plain @click="add2('2', item, ind)">新增于</el-button>
                            <el-button type="primary" plain @click="add2('3', item, ind)">活跃于</el-button>
                            <el-button @click="remove(index, ind)">删除</el-button>
                        </div>
                        <div class="v-row" v-if="ind !== 0">
                            <v-button :width="30" @on-click="toggleRelationship(val)"
                                      :btnText="val.vs_bool_code_value === 'and' ? '且' : '或'"></v-button>
                        </div>
                        <div class="event-item" v-if="val.where_type === '1'">
                            <!--第一行-->
                            <div class="v-row" @mouseover="val.vs_iconShow = true" @mouseout="val.vs_iconShow = false">
                                <span>在</span>
                                <el-date-picker
                                    v-model="val.vs_dateList"
                                    type="daterange"
                                    size="mini"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="getDate(val)">
                                </el-date-picker>
                                <span>之间</span><span>做过</span>
                                <el-select size="mini" class="width160" v-model="val.event_id" placeholder="请选择" filterable>
                                    <el-option
                                        v-for="item in eventList"
                                        :key="item.event_id"
                                        :label="item.event_name"
                                        :value="item.event_id">
                                    </el-option>
                                </el-select>
                                <i v-show="val.vs_iconShow" class="iconfont icon-add" @click="addRow(val)"></i>
                            </div>
                            <!--中间两行-->
                            <div class="vs-row" v-for="(obj, ind) in val.cond_groups" :key="obj.id" @mouseover="obj.vs_iconShow = true" @mouseout="obj.vs_iconShow = false">
                                <div class="lf">
                                    <el-select size="mini" class="width160" v-model="obj.meta_id" placeholder="请选择" @change="changeEvent(obj)" filterable>
                                        <el-option
                                            v-for="item in eventArr1"
                                            :key="item.meta_id"
                                            :label="item.colume_chs"
                                            :value="item.meta_id">
                                        </el-option>
                                    </el-select>
                                    <el-select size="mini" class="width100" v-model="obj.vs_cond_fmt" placeholder="请选择" @change="changeCondition(obj)" filterable>
                                        <el-option
                                            v-for="item in eventArr2"
                                            :key="item.code_value"
                                            :label="item.code_value_nm_cns"
                                            :value="item.code_value">
                                        </el-option>
                                    </el-select>
                                </div>
                                <el-input v-if="getBool_1(obj)" class="lf width100" v-model="obj.cond_value[0]" size="mini"></el-input>
                                <div class="date-time lf" v-if="getBool_2(obj)">
                                    <span>在</span>
                                    <el-date-picker
                                      size="mini"
                                        class="width270"
                                        v-model="obj.vs_date_value"
                                        type="daterange"
                                        align="right"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        @change="change(obj, ind)">
                                    </el-date-picker>
                                    <span>之间</span>
                                </div>
                                <div class="amount-range lf " v-if="getBool_3(obj)">
                                    <span>在</span>
                                    <el-input class="width160" v-model="obj.cond_value[0]" placeholder="输入内容" size="mini"></el-input>
                                    <span style="margin-left: 5px;">和</span>
                                    <el-input class="width160" v-model="obj.cond_value[1]" placeholder="输入内容" size="mini"></el-input>
                                    <span>之间</span>
                                </div>
                                <i v-show="obj.vs_iconShow" class="iconfont icon-close" @click="removeRow(val, ind)"></i>
                            </div>
                            <!--第四行-->
                            <div class="vs-row">
                                <span>次数</span>
                                <el-select class="width100" v-model="val.cond_fmt" placeholder="请选择" size="mini">
                                    <el-option
                                        v-for="item in timesCondList"
                                        :key="item.code_value"
                                        :label="item.code_value_nm_cns"
                                        :value="item.code_value">
                                    </el-option>
                                </el-select>
                                <el-input v-if="getBool(val)" class=" width100" v-model="val.cond_value[0]" size="mini"></el-input>
                                <div v-if="val.cond_fmt === '11'" style="display: inline-block">
                                    <el-input class=" width100" v-model="val.cond_value[0]" size="mini"></el-input>
                                    -
                                    <el-input class=" width100" v-model="val.cond_value[1]" size="mini"></el-input>
                                </div>
                            </div>
                        </div>
                        <div class="event-item" v-if="val.where_type === '2'">
                            <div class="v-row">
                                <span style="font-weight: bold; margin-right: 10px;">新增于</span>
                                <el-select size="mini" class="width160" v-model="val.cond_fmt" placeholder="请选择">
                                    <el-option
                                        v-for="item in A010001"
                                        :key="item.code_value"
                                        :label="item.code_value_nm_cns"
                                        :value="item.code_value">
                                    </el-option>
                                </el-select>
                                <!--<div style="display: inline-block;">-->
                                <!--<el-input class="width100" v-model="val.cond_value[0]" placeholder="请输入内容"></el-input>-->
                                <!--<span style="margin-left: 10px;">天</span>-->
                                <!--</div>-->
                                <el-date-picker
                                  size="mini"
                                    v-model="val.vs_dateList"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="getDate(val)">
                                </el-date-picker>
                            </div>
                        </div>
                        <div class="event-item" v-if="val.where_type === '3'">
                            <div class="v-row">
                                <span style="font-weight: bold; margin-right: 10px;">活跃于</span>
                                <el-select size="mini" class="width160" v-model="val.cond_fmt" placeholder="请选择">
                                    <el-option
                                        v-for="item in A010001"
                                        :key="item.code_value"
                                        :label="item.code_value_nm_cns"
                                        :value="item.code_value">
                                    </el-option>
                                </el-select>
                                <!--<div style="display: inline-block;">-->
                                <!--<el-input class="width100" v-model="val.cond_value[0]" placeholder="请输入内容"></el-input>-->
                                <!--<span style="margin-left: 10px;">天</span>-->
                                <!--</div>-->
                                <el-date-picker
                                  size="mini"
                                    v-model="val.vs_dateList"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="getDate(val)">
                                </el-date-picker>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="add-filter v-row">
            <el-tag>
                <i class="iconfont icon-add"></i>
            </el-tag>
            <el-button type="primary" plain @click="add1('1')">做过 / 没做过</el-button>
            <el-button type="primary" plain @click="add1('2')">新增于</el-button>
            <el-button type="primary" plain @click="add1('3')">活跃于</el-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import { VButton } from '../../../../../components'
    import { getDateTime } from '../../../../../assets/js/index'
    import Msg from '../../../../../assets/js/msg'

    export default {
        name: 'event-screening',
        components: {
            VButton
        },
        data () {
            return {
                // 筛选结果列表
                filterResultList: [],
                eventList: [],
                timesCondList: [],
                eventArr1: [],
                A010001: [
                    {
                        code_value_nm_cns: '固定时段',
                        code_value: '01'
                    }
                ],
                eventArr2: [],
                relationshipBtn: null // 最外层的关系按钮值
            }
        },
        methods: {
            add1 (str) {
                const obj = {
                    cond_link: 'B010006#and',
                    cond_groups: []
                }
                if (this.filterResultList.length > 2) {
                    Msg.alert('最多只能添加三行')
                    return
                }
                const o = {}
                if (str === '1') {
                    o.vs_iconShow = false
                    o.cond_link = 'B010006#or'
                    o.vs_bool_code_value = 'or'
                    o.where_type = '1'
                    o.from_date = ''
                    o.to_date = ''
                    o.vs_dateList = []
                    o.event_id = ''
                    o.cond_fmt = ''
                    o.cond_value = []
                    o.cond_groups = []
                } else {
                    o.cond_link = 'B010006#or'
                    o.vs_bool_code_value = 'or'
                    o.vs_dateList = []
                    o.where_type = str
                    o.cond_fmt = ''
                    o.cond_value = []
                }
                obj.cond_groups.push(o)
                this.filterResultList.push(obj)
            },
            add2 (str, item, ind) {
                const obj = {}
                if (item.cond_groups.length > 2) {
                    Msg.alert('最多只能添加三行')
                    return
                }
                if (str === '1') {
                    obj.vs_iconShow = false
                    obj.cond_link = ''
                    obj.vs_bool_code_value = 'or'
                    obj.vs_dateList = []
                    obj.where_type = '1'
                    obj.from_date = ''
                    obj.to_date = ''
                    obj.event_id = ''
                    obj.cond_fmt = ''
                    obj.cond_value = []
                    obj.cond_groups = []
                } else {
                    obj.cond_link = ''
                    obj.vs_dateList = []
                    obj.vs_bool_code_value = 'or'
                    obj.where_type = str
                    obj.cond_fmt = ''
                    obj.cond_value = []
                }
                item.cond_groups.splice(ind + 1, 0, obj)
            },
            addRow (item) {
                if (item.cond_groups.length < 2) {
                    let obj = {
                        cond_link: 'B010006#AND',
                        meta_id: '',
                        cond_fmt: '',
                        vs_cond_fmt: '',
                        cond_value: [],
                        vs_iconShow: false
                    }
                    item.cond_groups.push(obj)
                } else {
                    Msg.alert('最多只能添加两行！！！')
                }
            },
            remove (index, ind) {
                this.filterResultList[index].cond_groups.splice(ind, 1)
                if (this.filterResultList[index].cond_groups.length === 0) {
                    this.filterResultList.splice(index, 1)
                }
            },
            removeRow (item, ind) {
                item.cond_groups.splice(ind, 1)
            },
            getDate (item) {
                if (item.vs_dateList === null) {
                    return
                }
                if (item.where_type === '1') {
                    item.from_date = getDateTime(item.vs_dateList[0], 's')
                    item.to_date = getDateTime(item.vs_dateList[1], 's')
                } else {
                    item.vs_dateList.forEach(obj => {
                        item.cond_value.push(getDateTime(obj, 's'))
                    })
                }
            },
            changeEvent (obj) {
                this.eventArr1.forEach(item => {
                    if (item.meta_id === obj.meta_id) {
                        if (item.data_type === 'text') {
                            this.eventArr2 = this.commonData.B010003
                            obj.vs_data_type = 'text'
                            obj.vs_code = 'B010003'
                        } else if (item.data_type === 'number') {
                            this.eventArr2 = this.commonData.B010004
                            obj.vs_data_type = 'number'
                            obj.vs_code = 'B010004'
                        } else if (item.data_type === 'date') {
                            this.eventArr2 = this.commonData.B010005
                            obj.vs_data_type = 'date'
                            obj.vs_code = 'B010005'
                        }
                    }
                })
            },
            changeCondition (obj) {
                obj.cond_fmt = `${obj.vs_code}#${obj.vs_cond_fmt}`
            },
            toggle () {
                if (this.relationshipBtn.code_value === this.commonData.B010006[0].code_value) {
                    this.relationshipBtn = this.commonData.B010006[1]
                } else {
                    this.relationshipBtn = this.commonData.B010006[0]
                }
                this.filterResultList.forEach(item => {
                    item.cond_link = this.relationCode + '#' + this.relationshipBtn.code_value
                })
            },
            toggleRelationship (item) {
                if (item.vs_bool_code_value === 'and') {
                    item.vs_bool_code_value = 'or'
                } else {
                    item.vs_bool_code_value = 'and'
                }
                item.cond_link = `${this.relationCode}#${item.vs_bool_code_value}`
            },
            getBool_1 (obj) {
                if (obj.vs_data_type === 'number' && (obj.vs_cond_fmt === '01' || obj.vs_cond_fmt === '02' || obj.vs_cond_fmt === '03' || obj.vs_cond_fmt === '04' || obj.vs_cond_fmt === '05' || obj.vs_cond_fmt === '06' || obj.vs_cond_fmt === '07' || obj.vs_cond_fmt === '08')) {
                    return true
                } else if (obj.vs_data_type === 'text' && (obj.vs_cond_fmt === '01' || obj.vs_cond_fmt === '02' || obj.vs_cond_fmt === '03' || obj.vs_cond_fmt === '04' || obj.vs_cond_fmt === '05' || obj.vs_cond_fmt === '06' || obj.vs_cond_fmt === '07' || obj.vs_cond_fmt === '08' || obj.vs_cond_fmt === '09' || obj.vs_cond_fmt === '10')) {
                    return true
                } else if (obj.vs_data_type === 'date' && (obj.vs_cond_fmt === '01' || obj.vs_cond_fmt === '02' || obj.vs_cond_fmt === '03' || obj.vs_cond_fmt === '04' || obj.vs_cond_fmt === '05' || obj.vs_cond_fmt === '06' || obj.vs_cond_fmt === '07' || obj.vs_cond_fmt === '08' || obj.vs_cond_fmt === '09' || obj.vs_cond_fmt === '10')) {
                    return true
                } else {
                    return false
                }
            },
            getBool_2 (obj) {
                if (obj.vs_data_type === 'date' && obj.vs_cond_fmt === '15') {
                    return true
                } else {
                    return false
                }
            },
            getBool_3 (obj) {
                if (obj.vs_data_type === 'number' && obj.vs_cond_fmt === '11') {
                    return true
                } else {
                    return false
                }
            },
            getBool (item) {
                if (item.cond_fmt === '01' || item.cond_fmt === '02' || item.cond_fmt === '03' || item.cond_fmt === '04' || item.cond_fmt === '05' || item.cond_fmt === '06' || item.cond_fmt === '07' || item.cond_fmt === '08') {
                    return true
                } else {
                    return false
                }
            }
        },
        created () {
            this.commonData = JSON.parse(sessionStorage.getItem('commonData'))
            this.eventList = this.commonData.B020002
            this.timesCondList = this.commonData.B010004
            this.eventArr1 = this.commonData.META_COLUME
            this.relationCode = 'B010006'
            this.relationshipBtn = this.commonData[this.relationCode][0]
        }
    }
</script>

<style lang="stylus" type="text/stylus" rel="stylesheet/stylus">
    #eventScreening
        padding-top 24px
        .group-event-screening
            position relative
            padding-left 30px
            .relationshipBtn
                position absolute
                top 50%
                left 0
                margin-top -15px
            .group-event-container
                .group-event-screening-item
                    position relative
                    .addAndMove
                        position absolute
                        bottom 10px
                        right 10px
                        .el-button
                            font-size 12px
                            vertical-align middle
                            padding 0 15px
                            height 30px
                            border-radius 15px
                            line-height 30px
                            margin-left 15px
                    .v-row, .vs-row
                        height 50px
                        line-height 50px
                        padding-left 10px
                    .vs-row
                        padding-left 38px
                    .event-item
                        // background #F4F4F5
                        .v-row, .vs-row
                            & > span, & > div > span
                                font-size 12px
                                color #5A5E66
                                margin-right 10px
                            .v-datePicker
                                vertical-align middle
                                margin-right 10px
                            .iconfont
                                font-size 14px
                                color #d8dce5
                            .iconfont:hover
                                color #016DFB
                            .el-date-editor
                                margin-right 10px
                        .el-input
                            margin-right 10px
        .group-event-screening:before
            content ''
            position absolute
            top 10px
            left 16px
            border-left 1px solid #D8DCE5
            height calc(100% - 20px)
        .add-filter
            height 50px
            line-height 50px
            .el-tag
                width 30px
                height 30px
                padding 0
                text-align center
                vertical-align middle
                .icon-add
                    font-size 16px
                    color #016DFB
            .el-button
                font-size 12px
                vertical-align middle
                padding 0 15px
                height 30px
                border-radius 15px
                line-height 30px
                margin-left 15px
</style>
